<template>
    <div>
        <!-- 专利信息 -->
        <div class="m-from">
            <div class="from-title">
                <div class="tit-right">
                    <button class="add"><span><img src="../../../../static/images/add.png" alt=""></span>新增</button>
                    <button class="out"><span><img src="../../../../static/images/out.png" alt=""></span>导出</button>
                </div>
            </div>
            <div class="from-table">
                <table border="1">
                    <tr>
                        <th>序号</th>
                        <th>项目类别</th>
                        <th>项目名称</th>
                        <th>归口部门</th>
                        <th>补助资金 （万元）</th>
                        <th>已到账 （万元）</th>
                        <th>起始日期</th>
                        <th>完成日期</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in tableData" :key="index">
                        <td>{{item.num}}</td>
                        <td>{{item.type}}</td>
                        <td>{{item.Projcet}}</td>
                        <td>{{item.department}}</td>
                        <td>{{item.subsidy}}</td>
                        <td>{{item.account}}</td>
                        <td>{{item.star}}</td>
                        <td>{{item.EndDate}}</td>
                        <td>{{item.remarks}}</td>
                        <td class="edit">
                            <span class="del">删除</span>
                            <span>编辑</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData: [//科技项目信息
                {
                    num:'01',
                    type: 'HJ23572',
                    Projcet:'HJ23572',
                    department:'HJ23572',
                    subsidy:'某某某',
                    account: '某某某',
                    star:'2019-04-22',
                    EndDate:'2020-04-22',
                    remarks: '申请代缴年费'
                },
                {
                    num:'02',
                    type: 'HJ23572',
                    Projcet:'HJ23572',
                    department:'HJ23572',
                    subsidy:'某某某',
                    account: '某某某',
                    star:'2019-04-22',
                    EndDate:'2020-04-22',
                    remarks: '申请代缴年费'
                },
            ],
        }
    },
    methods:{
        patent_type(index,type){//专利信息 类型选择
            var tableData = this.tableData;
            tableData[index].type = type;
            this.tableData = tableData;
        },
        patent_state(index,state){
            var tableData = this.tableData;
            tableData[index].state = state;
            this.tableData = tableData;
        }
    }
}
</script>
<style lang="less" scoped>
    button{
        border:none;
        background: none;
    }
    .m-from{
        font-family:MicrosoftYaHei;
        font-weight:400;
        padding: 55px 15px 300px;
        background: #fff;
        .from-title{
            height: 40px;
            line-height: 40px;
            .tit-right{
                float: right;
                &>button{
                    width: 98px;
                    height: 36px;
                    border-radius: 4px;
                    line-height: 36px;
                    color: #fff;
                    font-size: 16px;
                    margin-left: 15px;
                    &.add{
                        background:linear-gradient(0deg,rgba(2,98,255,1) 0%,rgba(73,206,255,1) 100%);
                    }
                    &.out{
                        background:linear-gradient(0deg,#189200 0%,#1A9D00 100%);
                    }
                    &>span{
                        display: inline-block;
                        height: 20px;
                        margin-right: 5px;
                        img{
                            height: 100%;
                            vertical-align: none;
                        }
                    }
                }
            }
        }
        .from-table{
            margin-top: 30px;
            &>table{
                border-color: #CCCCCC;
                width: 100%;
                text-align: center;
                border:none;
                tr{
                    th{
                        height: 50px;
                        line-height: 50px;
                        font-size: 16px;
                        color: #333;
                    }
                    td{
                        height: 40px;
                        line-height: 40px;
                        font-size: 14px;
                        color: #666;
                        &.edit{
                            color: #1575F9;
                            .del{
                                color: #FF0000;
                                margin-right: 5px
                            }
                        }
                    }
                }
            }
        }
    }
</style>
